<template>
    <Modal v-model="modal.show" width="500" :title="modal.title">
        <Form ref="formRef" :model="formItem" :rules="ruleValidate" :label-width="150">
            <FormItem label="机构代码" prop="code"><Input v-model="formItem.code" placeholder="" />
            </FormItem>
            <FormItem label="机构名称" prop="name">
                <Input v-model="formItem.name" placeholder="" />
            </FormItem>
            <FormItem label="所属省/市" prop="city">
                <City v-model="formItem.city" @on-change="chg" />
            </FormItem>
            <FormItem label="数据库连接字符串" prop="connStr"><Input v-model="formItem.connStr" type="textarea" :rows="4" />
            </FormItem>
            <FormItem label="模块" prop="moduleIDs">
                <Select v-model="formItem.moduleIDs" multiple>
                    <Option v-for="item in moduleList" :value="item.moduleID" :key="item.moduleID">{{ item.name }}
                    </Option>
                </Select>
            </FormItem>
            <FormItem label="分组模式" prop="usePolicy">
                <RadioGroup v-model="formItem.usePolicy">
                    <Radio label="DRG"></Radio>
                    <Radio label="DIP"></Radio>
                </RadioGroup>
            </FormItem>
        </Form>
        <Form ref="formDynamicRef" :model="formDynamic" :label-width="150">
            <template v-for="(item, index) in formDynamic.items">
                <FormItem v-if="formItem.moduleIDs.length > 0" :key="index" :label="'院区名称/代码'"
                    :prop="'items.' + index + '.name'"
                    :rules="{ required: true, message: '院区 ' + item.index + ' 不能为空', trigger: 'blur' }">
                    <Row>
                        <Col span="18">
                        <Input type="text" v-model="item.name" placeholder=""></Input>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="18">
                        <Input type="text" v-model="item.code" placeholder=""></Input>
                        </Col>
                        <Col span="4" offset="1">
                        <Button @click="handleRemove(index)" type="error">删除</Button>
                        </Col>
                    </Row>
                </FormItem>
            </template>
            <FormItem>
                <Row>
                    <Col span="12">
                    <Button type="dashed" long @click="handleAdd" icon="md-add">新增</Button>
                    </Col>
                </Row>
            </FormItem>
        </Form>
        <template #footer>
            <div>
                <Button type="text" @click="closeModal">取消</Button>
                <Button type="primary" @click="handleOk">确定</Button>
            </div>
        </template>
    </Modal>
</template>
<script setup>
import http from '@/util/http'
import _ from 'lodash'
let { proxy } = getCurrentInstance()
const emit = defineEmits(['initList'])
let modal = reactive({ show: false, title: '' })
const formRef = ref(null)
const formDynamicRef = ref()
const index = ref(1)
const formDynamic = reactive({
    items: [{
        name: '',
        code: '',
        index: 1,
        areaID: ''
    }]
})

let moduleList = reactive([])

const initModule = () => {
    http.get('/Basic/Module/All', {}, (response) => {
        moduleList = response.data.data
    })
}
initModule()

const handleSubmit = (name) => {
    proxy.$refs[name].validate((valid) => {
        if (valid) {
            proxy.$Message.success('Success!');
        } else {
            proxy.$Message.error('Fail!');
        }
    })
}
const handleReset = (name) => {
    proxy.$refs[name].resetFields();
}
const handleAdd = () => {
    index.value++;
    formDynamic.items.push({
        name: '',
        index: index.value,
        code: '',
        areaID: ''
    });
}

const handleRemove = (index) => {
    formDynamic.items.splice(index, 1)
}
let formItem = reactive({
    tenantID: '',
    name: '',
    code: '',
    connStr: '',
    province: '',
    city: '',
    cityName: '',
    tenantAreas: [],
    moduleIDs: [],
    usePolicy: 'DRG'
})

const ruleValidate = {
    name: [{ required: true, message: '请输入', trigger: 'blur' }],
    code: [{ required: true, message: '请输入', trigger: 'blur' }],
    connStr: [{ required: true, message: '请输入', trigger: 'blur' }],
    city: [{ required: true, message: '请输入', trigger: 'blur' }],
}
const closeModal = () => {
    modal.show = false
}
const chg = (data) => {
    formItem.province = data.p
    formItem.city = data.c
    formItem.cityName = data.n
}
const show = (type, data) => {
    formRef.value.resetFields()
    modal.show = true
    formDynamic.items = []
    if (type == 1) {
        formItem.tenantID = ''
        modal.title = '添加机构'
    } else {
        var clone = _.cloneDeep(data)
        formItem = clone
        formDynamic.items = clone.tenantArea
        modal.title = '编辑机构'
    }
}

const handleOk = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            formItem.tenantAreas = formDynamic.items
            http.post('/Basic/Tenant/AddOrUpdate', toRaw(formItem), (response) => {
                if (response.data.flag) {
                    emit('initList')
                    proxy.$Message.success(response.data.msg)
                    modal.show = false
                } else {
                    proxy.$Message.error(response.data.msg)
                }
            })
        } else {
            return false
        }
    })
}

defineExpose({
    show,
})
</script>